<extend name="Base/common"/>

<block name="body">

    <div class="uk-slidenav-position" data-uk-slideshow="{autoplay:true}">
    <ul class="uk-slideshow" >
        <li><img class="max-height-300" src="__IMG__/banner1.jpg" alt=""></li>
        <li><img class="max-height-300" src="__IMG__/banner2.jpg" alt=""></li>
        <li><img class="max-height-300" src="__IMG__/banner3.jpg" alt=""></li>
    </ul>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
    <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-text-center uk-container-center">
        <li data-uk-slideshow-item="0"><a href=""></a></li>
        <li data-uk-slideshow-item="1"><a href=""></a></li>
        <li data-uk-slideshow-item="2"><a href=""></a></li>
    </ul>
    </div>


<div class="tm-section tm-section-color-2 tm-section-colored">
    <div class="uk-container uk-container-center uk-text-center">

        <h1 class="uk-heading-large">特点</h1>

        <p class="uk-text-large">UIKit为您提供了全面的HTML、CSS及JS组件，<br class="uk-hidden-small"> 它们使用简单，容易定制和扩展。</p>

        <div class="uk-grid" data-uk-grid-margin>

            <div class="uk-width-medium-1-4">
                <div class="uk-panel">
                    <img class="tm-image-pull" src="docs/images/icon_less.svg" width="200" height="140" alt="LESS">
                    <h2 class="uk-margin-top-remove">LESS</h2>
                    <p>UIkit 基于 <a href="http://www.lesscss.net" target="_blank" rel="nofollow">LESS</a>
                        开发，代码结构清晰简单，易于扩展和维护。</p>
                </div>
            </div>

            <div class="uk-width-medium-1-4">
                <div class="uk-panel">
                    <img class="tm-image-pull" src="docs/images/icon_components.svg" width="200" height="140"
                         alt="Components">
                    <h2 class="uk-margin-top-remove">组件</h2>
                    <p>体积小、反应灵敏的响应式组件，使用一致的、无冲突的命名规则。</p>
                </div>
            </div>

            <div class="uk-width-medium-1-4">
                <div class="uk-panel">
                    <img class="tm-image-pull" src="docs/images/icon_themes.svg" width="200" height="140" alt="Themes">
                    <h2 class="uk-margin-top-remove">定制</h2>
                    <p>可根据 UIKit 基本的风格及样式，轻松地自定义创建出自己喜欢的主题样式。</p>
                </div>
            </div>

            <div class="uk-width-medium-1-4">
                <div class="uk-panel">
                    <img class="tm-image-pull" src="docs/images/icon_responsive.svg" width="200" height="140"
                         alt="Responsive">
                    <h2 class="uk-margin-top-remove">响应式</h2>
                    <p>根据不同的屏幕分辨率与上网设备，UIKit 会自动做出响应，提供一致的体验。</p>
                </div>
            </div>

        </div>

    </div>
</div>

<div class="tm-section tm-section-color-white">
    <div class="uk-container uk-container-center uk-text-center">

        <h1 class="tm-margin-large-bottom">UIkit相关资源</h1>

        <div class="uk-grid tm-grid-margin-large" data-uk-grid-match="{target:'.uk-panel'}" data-uk-grid-margin>

            <div class="uk-width-medium-1-3">
                <a class="uk-panel tm-panel-link" href="http://getuikit.net/warp/">
                    <div class="tm-icon"><img src="http://getuikit.net/warp/images/logo2.svg"/></div>
                    <h2>Warp 主题框架</h2>
                    <p>一款快速和简洁的主题框架，它提供了丰富的工具集，用于开发跨平台的主题</p>
                </a>
            </div>

            <div class="uk-width-medium-1-3">
                <a class="uk-panel tm-panel-link" href="http://www.pagekit.com/" rel="nofollow" target="_blank">
                    <div class="tm-icon"><img src="dist/img/pagekit-logo-contrast.svg"/></div>
                    <h2>Pagekit</h2>
                    <p>一款全新的现代CMS，用于创作和分享</p>
                </a>
            </div>

            <div class="uk-width-medium-1-3">
                <a class="uk-panel tm-panel-link" href="http://slimphp.net/" target="_blank">
                    <div class="tm-icon"><img src="http://slimphp.net/assets/images/favicon.png"/></div>
                    <h2>Slim 框架</h2>
                    <p>Slim是一款 PHP 微框架，可以帮助你快速编写简单但功能强大的 web 应用和 API 。</p>
                </a>
            </div>

        </div>

    </div>
</div>

<div class="tm-section tm-section-color-2 tm-section-colored">
    <div class="uk-container uk-container-center uk-text-center">

        <h1 class="uk-heading-large uk-margin-bottom-remove">开放源码</h1>

        <p class="uk-text-large">UIKit 是一款开源的前端UI界面框架，<br class="uk-hidden-small"> 你可以无任何限制的使用 UIKit 来创建自己的风格。</p>

        <div class="uk-grid uk-grid-divider" data-uk-grid-margin>

            <div class="uk-width-1-1 uk-width-medium-1-3">
                <div class="uk-panel">
                    <h2>MIT 许可协议</h2>
                    <p>UIkit 是基于MIT许可协议的开源项目。它完全免费，你可以无任何限制的使用、复制、合并、发布及分发这个框架。</p>
                </div>
            </div>

            <div class="uk-width-medium-1-3">
                <div class="uk-panel">
                    <h2>我们的英雄</h2>
                    <p>非常感谢 LESS、jQuery、normalize.css及FontAwesome，没有这些强大的开源项目就不可能有UIkit。</p>
                </div>
            </div>

            <div class="uk-width-medium-1-3">
                <div class="uk-panel">
                    <h2>积极的开发</h2>
                    <p>UIkit 由 <a href="http://www.yootheme.com" target="_blank" rel="nofollow">YOOtheme</a>
                        团队建造，YOOtheme 通过丰富的经验创建着 Joomla 和 WordPress 主题，并支持着 <a
                                href="http://www.yootheme.com/themes/warp-framework" target="_blank" rel="nofollow">Warp
                            theme framework</a> 项目。</p>
                </div>
            </div>

        </div>

    </div>
</div>

</block>